<template>
  <KView class="goods-list-comp">
    <KView v-for="goods in goodsList" :key="goods.id" class="goods-list-comp-item">
      <goods-item :goods="goods" @item-click="itemClick"></goods-item>
    </KView>
    <KView class="good-list-nodata">
      <sys-loading v-if="loading" :size="50"></sys-loading>
      <KView v-else-if="!pagination.hasNextPage()" class="good-list-nodata-content">
        <KView class="good-list-nodat-img">
          <img class="sys-img" :src="noDataImg" mode="aspectFit">
        </KView>
        <KView class="good-list-nodat-text">
          已经拉到底啦！
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysLoading from 'common/sysLoading';
  import GoodsItem from './goodsItem';

  export default {
    props: {
      goodsList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      loading: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        noDataImg: GlobalData.images.noData
      };
    },

    methods:{
      itemClick(goods){
        this.$emit('item-detail', goods);
      }
    },

    components: {
      GoodsItem,
      SysLoading
    }
  };

</script>

<style lang="scss">
  .goods-list-comp {
    .goods-list-comp-item {
      height: formatPx(170);
      border-top: 1px solid #DADADA;
      padding: formatPx(30) 0;
    }

    .good-list-nodata {
      height: formatPx(102);
      background: #EFEFEF;
      color: #999999;
      position: relative;
      margin-left: formatPx(-30);
      margin-right: formatPx(-30);

      .good-list-nodata-content {
        @extend .center-middle;
        height: formatPx(30);

        >div {
          float: left;
          height: 100%;
        }

        .good-list-nodat-img {
          width: formatPx(30);
        }

        .good-list-nodat-text {
          line-height: formatPx(30);
          font-size: formatPx(26);
          margin-left: formatPx(24);
        }
      }
    }
  }

</style>
